<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基础例子</title>
<link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="static/bootstrap/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="static/jquery/jquery-1.9.1.js"></script>
<!-- canvas-to-blob.min.js is only needed if you wish to resize images before upload.
     This must be loaded before fileinput.min.js -->
<!--用于上传图片之前调整大小  -->
<script src="static/bootstrap/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>
<!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview.
     This must be loaded before fileinput.min.js -->
<!--预览时，排序功能  ||位于fileinput.min.js前-->
<script src="static/bootstrap/js/plugins/sortable.min.js" type="text/javascript"></script>
<!-- purify.min.js is only needed if you wish to purify HTML content in your preview for HTML files.
     This must be loaded before fileinput.min.js -->
<!--HTML文件中预览功能 || 位于fileinput.min.js前-->
<script src="static/bootstrap/js/plugins/purify.min.js" type="text/javascript"></script>
<!-- the main fileinput plugin file -->
<!--文件上传主插件  -->
<script src="static/bootstrap/js/fileinput.min.js"></script>
<!-- bootstrap.js below is needed if you wish to zoom and view file content 
     in a larger detailed modal dialog -->
<!--调焦和查看文件内容细节功能  -->
<script src="static/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- optionally if you need a theme like font awesome theme you can include 
    it as mentioned below -->
<!--主题功能  -->
<script src="static/bootstrap/themes/fa/theme.js"></script>
<!-- optionally if you need translation for your language then include 
    locale file as mentioned below -->
<!--多国语言功能  -->
<script src="static/bootstrap/js/locales/zh.js"></script>
<style>
hr{
    margin-top:7px;
    *margin: 0;
    border: 0;
    color: black;
    background-color: black; 
    height: 3px
}
</style>

</head>
<body>
<h3>已下案例来源于网址<a href="http://plugins.krajee.com/file-basic-usage-demo#basic-example-1">http://plugins.krajee.com/file-basic-usage-demo#basic-example-1</a></h3>
<label class="control-label">basic example1 </label>
<p>说明：将class设置为file，bootstrap会自动将一个file 转换为一个bootstrap file</p>
<input id="input-1" type="file" class="file">
<hr/>
<label class="control-label">basic example2</label>
<p>说明：data-show-preview="false" 隐藏预览框</p>
<input id="input-1a" type="file" class="file" data-show-preview="false">
<hr/>
<label class="control-label">basic example3</label>
<p>说明：通过input标签的属性，控制插件的options，eg:显示隐藏上传按钮和标题（browse边上的那个upload按钮）</p>
<input id="input-2" name="input2[]" type="file" class="file" multiple data-show-upload="false" data-show-caption="true">
<hr/>
<label class="control-label">basic example4</label>
<p>说明：设置input标签为只读或无效</p>
<label class="control-label">Readonly Input</label>
<input id="input-3a" type="file" class="file" readonly="true">
<label class="control-label">Disabled Input</label>
<input id="input-3b" type="file" class="file" disabled="true">
<hr/>
<label class="control-label">basic example5</label>
<p>说明：通过js初始化input标签，隐藏标题和显示框而仅仅留下按钮，通过添加file-loading.class，显示织入的指示条，用以显示插件的加载</p>
<input id="input-4" name="input4[]" type="file" multiple class="file-loading">
<script>
$(document).on('ready', function() {
    $("#input-4").fileinput({showCaption: false});
});
</script>
<hr/>
<label class="control-label">basic example6</label>
<p>说明：改变上传框大小，是指最大许可上传数为3</p>
<input id="input-6" name="input6[]" type="file" multiple class="file-loading">
<script>
$(document).on('ready', function() {
    $("#input-6").fileinput({
        showUpload: false,
        maxFileCount: 3,
        mainClass: "input-group-lg"
    });
});
</script>
<hr/>
<label class="control-label">basic example7</label>
<p>说明：使用data属性，设置上传框，这个例子示范了通过data属性利用json设置插件属性allowedFileExtensions（控制了上传文件的格式）</p>
<input id="input-7" name="input7[]" multiple type="file" class="file file-loading" data-allowed-file-extensions='["csv", "txt"]'>
<hr/>
</body>
<script type="text/javascript">

</script>
</html>